<template>
	<div class='detail'>
		<div class='swiper-main'>
			<swiper :options="swiperOption">
			  <swiper-slide 
				v-for='(item,index) in swiperList' 
				:key='index'
			   >
				<img :src="item.imgUrl" alt="">
			  </swiper-slide>
			</swiper>
			<div class="swiper-pagination"></div> 
		</div>
		<div class='goods-name'>
			<h1>2021春茶 - 白茶 珍稀白茶1号100g装</h1>
			<div>性价首选，茶感十足、鲜醇耐泡的大众口粮茶</div>
		</div>
		<div class='goods-price'>
			<div class='oprice'>
				<span>¥</span>
				<b>288</b>
			</div>
			<div class='pprice'>
				<span>价格:</span>
				<del>¥139</del>
			</div>
		</div>
		
		<footer>
			<div class='add-cart'>加入购物车</div>
			<div >立即购买</div>
		</footer>
	</div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
	data(){
	  return{
			swiperOption: {//swiper3
				autoplay: 3000,
				speed: 1000,
				pagination: {
					el: '.swiper-pagination',
					type:'fraction'
				}
			},
			swiperList:[
				{
					imgUrl:'./images/goods-list1.jpeg'
				},
				{
					imgUrl:'./images/goods-list1.jpeg'
				},
				{
					imgUrl:'./images/goods-list1.jpeg'
				}
			]
	  }
	},
	components: {
	  swiper,
	  swiperSlide
	},
}
</script>

<style scoped lang="scss">
.swiper-main{
	position: relative;
	width: 100%;
	height:10rem;
	overflow: hidden;
}
.swiper-container{
	width: 100%;
	height: 10rem;
}
.swiper-container img{
	width: 100%;
	height: 10rem;
}
.swiper-pagination{
	bottom:0.266666rem;
	width: 100%;
	text-align: right;
	color:#FFFFFF;
	font-size:0.426666rem;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
	left:-0.533333rem;
}
.goods-name{
	padding:0.533333rem 0.266666rem;
	border-bottom:1px solid #CCCCCC;
	h1{
		font-size:0.533333rem;
		font-weight: 500;
	}
	div{
		padding:0.08rem 0;
		font-size:0.373333rem;
		color: #999999;
	}
}
.goods-price{
	padding:0.533333rem 0.266666rem;
	.oprice{
		color:red;
		span{
			font-size:0.32rem;
		}
	}
	.pprice{
		color:#999999;
		font-size:0.373333rem;
	}
}
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom:0;
	left: 0;
	width: 100%;
	height: 1.306666rem;
	border-top:1px solid #cccccc;
	background-color: #fff;
	div{
		width: 50%;
		line-height: 1.306666rem;
		font-size: 0.426666rem;
		text-align: center;
		color:#fff;
		background-color: red;
		&.add-cart{
			background-color: #FF9500;
		}
	}
	
}
</style>
